<template>
  <div class="page_box">
    <div class="title">订单详情</div>

    <div class="content">
      <div class="row_box">
        <div class="cell">
          <div class="name">订单编号：</div>
          <div class="txt">{{orderInfo.orderNo}}</div>
        </div>

        <div class="cell">
          <div class="name">订单时间：</div>
          <div class="txt">{{orderInfo.createdDate}}</div>
        </div>

        <div class="cell">
          <div class="name">客户姓名：</div>
          <div class="txt">{{orderInfo.realName}}</div>
        </div>

        <div class="cell">
          <div class="name">订单种类：</div>
          <div class="txt">{{orderInfo.orderType}}</div>
        </div>

        <div class="cell">
          <div class="name">渠道来源：</div>
          <div class="txt">{{orderInfo.channel}}</div>
        </div>
      </div>
    </div>

    <div class="btn_group">
      <el-button @click="goBack">返回</el-button>
    </div>

  </div>
</template>

<script>
import { GETORDERINFO } from "@/http/interface";
export default {
  data() {
    return {
      orderInfo: {},
    };
  },
  mounted() {
    let o = this.$route.query;
    this.getInfo(o.id);
  },
  methods: {
    // 获取订单信息
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GETORDERINFO(oParams).then((res) => {
        this.orderInfo = res.data || {};
      });
    },

    // 返回
    goBack(){
      this.$router.go(-1)

    }
  },
};
</script>

<style lang="scss" scoped>
.title {
  position: relative;
  padding: 20px;
}
.title:after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #d8d8d8;
  transform: scaleY(0.5);
}
.row_box {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  .cell {
    flex: 0 0 50%;
    padding: 10px;
    display:flex;
    align-items: center;
  }
}
.btn_group{
  padding:20px;
}
</style>
